import React from 'react'
import closeIcon from "./close-icon.png"
import './index.scss'

const Modal = props => {
  const {
    children,
    transparent = false,
    bottom = false,
    closable = true,
    visible = false,
    closePlacement = "bottom",
    onClose,
    className = ''
  } = props

  return (
    <div
      className={`modal ${visible ? 'modal-visible' : 'modal-hidden'} ${transparent ? 'modal-transparent' : 'modal-style'} ${className}`}>
      <div className="modal-wrap" onClick={onClose}/>
      <div className="modal-content">
        <div className={`modal-body ${bottom ? 'modal-body-bottom' : ''}`}>
          {children}
        </div>
        {closable &&
        <button className={`close-btn ${closePlacement}`} onClick={onClose}><img src={closeIcon} alt=""/></button>}
      </div>
    </div>
  )
}

export default Modal
